import { Table, Pagination } from 'antd';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';

import styles from './AuditForms.less';
import PayCountModal from './PayCountModal';
import ClaimsRecord from './ClaimsRecord';

import { getCompensationCount, queryPassengerList, getApplyRecordInfo } from '../../service';

const PassengerList = props => {
  // var tableList = props.checkedPaxList ? props.checkedPaxList.data : [];
  const { orderId, allDatas } = props;
  const [current, handleCurrent] = useState(1);
  const [pageSize, handlePageSize] = useState(10);
  const [total, handleTotal] = useState(0);
  const [tableData, handleTableData] = useState([]);

  // 过滤证件类型
  const flilterIDtype = v => {
    if (v === 'NI') {
      return <span>身份证</span>;
    } else if (v === 'PP' || v === 'PSPT') {
      return <span>护照</span>;
    } else {
      return <span>其他</span>;
    }
  };
  const filterPayStatus = v => {
    if (v === '0') {
      return <span>未支付</span>;
    } else if (v === '1') {
      return <span>支付成功</span>;
    } else if (v === '2') {
      return <span>支付失败</span>;
    } else {
      return <span>未支付</span>;
    }
  };

  const [passengerName, handlePassengerName] = useState('');
  const [payCountVisible, handlePayCountVisible] = useState(false); // 总补偿人数弹框
  const [data, handleData] = useState([]);
  // 打开总补偿次数
  const openCountModal = (payCount, record) => {
    if (payCount === '0') {
      return false;
    }
    handlePayCountVisible(true);
    handlePassengerName(record.psgName);
    getCompensationCount({
      flightNo: record.flightNo || record.flightNum,
      flightDate: record.flightDate,
      paxId: record.idx,
    }).then(res => {
      handleData(res);
    });
  };

  // 获取申领记录弹框数据
  const { data: claimsData, run: claimsFun } = useRequest(params => getApplyRecordInfo(params), {
    manual: true,
  });
  // 申领记录显示
  const [claimsVisible, setClaimsVisible] = useState(false);
  // 点击的旅客信息储存
  const [passengerTitle, setPassengerTitle] = useState('');

  // 打开申领记录弹框
  const openClaimsRecord = (applyCount, record) => {
    setClaimsVisible(true);
    setPassengerTitle(
      `${record.flightNum}航班${record.psgName}（${record.isChild === 'Y' ? '儿童' : '成人'}${record.withBaby === 'Y' ? '(携带婴儿)' : ''
      }）`,
    );
    claimsFun({
      orderId,
      paxId: record.idx,
    });
  };

  const { run: searchPassenger } = useRequest(
    () =>
      queryPassengerList({
        orderId: orderId,
        pageSize: pageSize,
        current: current,
      }),
    {
      manual: true,
      onSuccess: res => {
        handleTableData(res.data || res.data.data);
        handleTotal(res.total || res.data.total);
        handleCurrent(res.current || res.data.current);
        handlePageSize(res.pageSize || res.data.pageSize);
      },
    },
  );
  useEffect(() => {
    searchPassenger();
  }, [pageSize, current]);

  let columns = [];
  // 补偿单类型是异常行李并且补偿子类型是箱包补偿，已选旅客列表的字段如下：
  if (allDatas?.payType === '1' && allDatas?.orderSubType === '2') {
    // 姓名 证件类型 证件号 票号 补偿单状态 手机号 值机状态 是否取消 主仓位 子舱位 购票时间
    columns = [
      {
        title: '姓名',
        dataIndex: 'psgName',
        fixed: 'left',
        width: 110,
        align: 'center',
        render: (text, record) => {
          return (
            <div>
              <span style={{ verticalAlign: 'middle' }}>{text || record.psgNameEn}</span>
              {record.withBaby === 'Y' ? (
                <img
                  alt=""
                  style={{ verticalAlign: 'middle' }}
                  src={require('./images/icon-test.svg')}
                />
              ) : null}
              {record.isChild === 'Y' ? (
                <img
                  alt=""
                  style={{ verticalAlign: 'middle' }}
                  src={require('./images/ertong.svg')}
                />
              ) : null}
            </div>
          );
        },
      },
      {
        title: '证件类型',
        dataIndex: 'idType',
        align: 'center',
        width: 100,
        render: text => {
          return flilterIDtype(text);
        },
      },
      {
        title: '证件号',
        dataIndex: 'idNum',
        align: 'center',
        width: 180,
      },
      {
        title: '票号',
        dataIndex: 'etNum',
        align: 'center',
        width: 150,
      },
      {
        title: '补偿单状态',
        dataIndex: 'orderStatus',
        align: 'center',
        width: 120,
        render: v => (<>
            <span style={{ display: v === '0' ? 'block' : 'none' }}>草稿</span>
            <span style={{ display: v === '1' ? 'block' : 'none' }}>审核中</span>
            <span style={{ display: v === '2' ? 'block' : 'none' }}>通过</span>
            <span style={{ display: v === '3' ? 'block' : 'none' }}>生效</span>
            <span style={{ display: v === '4' ? 'block' : 'none' }}>已关闭</span>
            <span style={{ display: v === '5' ? 'block' : 'none' }}>未通过</span>
            <span style={{ display: v === '6' ? 'block' : 'none' }}>驳回</span>
            {/* <span style={{ display: v === '7' ? 'block' : 'none' }}>待审核</span> */}
            <span style={{ display: v === '8' ? 'block' : 'none' }}>已逾期</span>
            <span style={{ display: v === '9' ? 'block' : 'none' }}>注销</span>
            <span style={{ display: v === '10' ? 'block' : 'none' }}>已发放</span>
          </>),
          // 0草稿、1审核中、2通过、3生效、4关闭,5未通过6驳回 8逾期 9.注销 10箱包已发放)'
      }, 
      {
        title: '手机号',
        ellipsis: true,
        dataIndex: 'phone',
        align: 'center',
        width: 120,
      },
      {
        title: '值机状态',
        dataIndex: 'status',
        align: 'center',
        width: 130,
        render: (status) => (
          <>
            <span style={{ display: status === 'PT' ? 'block' : 'none' }}>PT（出票）</span>
            <span style={{ display: status === 'NA' ? 'block' : 'none' }}>NA（未值机）</span>
            <span style={{ display: status === 'AC' ? 'block' : 'none' }}>AC（值机）</span>
            <span style={{ display: status === 'XR' ? 'block' : 'none' }}>XR（值机取消）</span>
            <span style={{ display: status === 'CL' ? 'block' : 'none' }}>CL（订座取消）</span>
            <span style={{ display: status === 'SB' ? 'block' : 'none' }}>SB（候补）</span>
            <span style={{ display: status === 'DL' ? 'block' : 'none' }}>DL（拉下）</span>
          </>
        )
      },
      // todo 是否取消没有字段
      {
        title: '是否取消',
        dataIndex: 'isCancel',
        align: 'center',
        width: 100,
        render: text => {
          if (text === 'Y') {
            return <span>是</span>;
          } else {
            return <span>否</span>;
          }
        },
      },
      {
        title: '主舱位',
        dataIndex: 'mainClass',
        align: 'center',
        width: 100,
      },
      {
        title: '子舱位',
        dataIndex: 'subClass',
        align: 'center',
        width: 100,
      },
      {
        title: '购票时间',
        dataIndex: 'printTicketTime',
        align: 'center',
        width: 160,
      }
    ];
  } else {
    // 姓名领取状态 申领记录 本单补偿金额 总补偿次数 总补偿金额
    // 支付状态 支付失败原因 是否冻结 证件类型 证件号 旅客手机号 航段 主舱位子舱位 票号PNR 值机状态 购票时间
    columns = [
      {
        title: '姓名',
        dataIndex: 'psgName',
        fixed: 'left',
        width: 110,
        align: 'center',
        render: (text, record) => {
          return (
            <div>
              <span style={{ verticalAlign: 'middle' }}>{text || record.psgNameEn}</span>
              {record.withBaby === 'Y' ? (
                <img
                  alt=""
                  style={{ verticalAlign: 'middle' }}
                  src={require('./images/icon-test.svg')}
                />
              ) : null}
              {record.isChild === 'Y' ? (
                <img
                  alt=""
                  style={{ verticalAlign: 'middle' }}
                  src={require('./images/ertong.svg')}
                />
              ) : null}
            </div>
          );
        },
      },
      {
        title: '证件类型',
        fixed: 'left',
        dataIndex: 'idType',
        align: 'center',
        width: 100,
        render: text => {
          return flilterIDtype(text);
        },
      },
      {
        title: '领取状态',
        dataIndex: 'receiveStatus',
        fixed: 'left',
        align: 'center',
        width: 100,
        render: text => {
          if (text === '0') {
            return <span>未领取</span>;
          } else if (text === '1') {
            return <span>已领取</span>;
          } else if (text === '2') {
            return <span>领取中</span>;
          }
        },
      },
      {
        title: '证件号',
        dataIndex: 'idNum',
        align: 'center',
        width: 180,
      },
      {
        title: '旅客手机号',
        ellipsis: true,
        dataIndex: 'phone',
        align: 'center',
        width: 120,
      },
      {
        title: '航段',
        dataIndex: 'segment',
        align: 'center',
        width: 120,
      },
      {
        title: '申领记录',
        dataIndex: 'applyCount',
        align: 'center',
        width: 80,
        render: (applyCount, record) => (
          <span
            style={{ textDecoration: 'underline' }}
            onClick={() => {
              if (applyCount !== '0') {
                openClaimsRecord(applyCount, record);
              }
            }}
            className={applyCount !== '0' ? styles.count : ''}
          >
            {applyCount}
          </span>
        ),
      },
      {
        title: '总补偿次数',
        dataIndex: 'payCount',
        align: 'center',
        width: 100,
        render: (payCount, record) => (
          <span
            style={{ textDecoration: 'underline' }}
            onClick={() => {
              if (payCount !== '0') {
                openCountModal(payCount, record);
              }
            }}
            className={payCount !== '0' ? styles.count : ''}
          >
            {payCount}
          </span>
        ),
      },
      {
        title: '总补偿金额',
        dataIndex: 'payMoney',
        align: 'center',
        width: 100,
      },
      {
        title: '值机状态',
        dataIndex: 'status',
        align: 'center',
        width: 130,
        render: (status) => (
          <>
            <span style={{ display: status === 'PT' ? 'block' : 'none' }}>PT（出票）</span>
            <span style={{ display: status === 'NA' ? 'block' : 'none' }}>NA（未值机）</span>
            <span style={{ display: status === 'AC' ? 'block' : 'none' }}>AC（值机）</span>
            <span style={{ display: status === 'XR' ? 'block' : 'none' }}>XR（值机取消）</span>
            <span style={{ display: status === 'CL' ? 'block' : 'none' }}>CL（订座取消）</span>
            <span style={{ display: status === 'SB' ? 'block' : 'none' }}>SB（候补）</span>
            <span style={{ display: status === 'DL' ? 'block' : 'none' }}>DL（拉下）</span>
          </>
        )
      },
      {
        title: '本单补偿金额',
        dataIndex: 'currentAmount',
        align: 'center',
        width: 120,
      },
      {
        title: '购票时间',
        dataIndex: 'printTicketTime',
        align: 'center',
        width: 160,
      },
      {
        title: '支付状态',
        dataIndex: 'payStatus',
        align: 'center',
        width: 120,
        render: text => {
          return filterPayStatus(text);
        },
      },
      {
        title: '支付失败原因',
        dataIndex: 'payFailInfo',
        align: 'center',
        width: 180,
        render: text => {
          return text === "您申领的补偿中，存在补偿单已关闭，请重新申请" ? "" : text;
        }
      },
      {
        title: '是否冻结',
        dataIndex: 'switchOff',
        align: 'center',
        width: 100,
        render: text => {
          if (text === '0') {
            return <span>未冻结</span>;
          } else {
            return <span>已冻结</span>;
          }
        },
      },
      {
        title: '票号',
        dataIndex: 'etNum',
        align: 'center',
        width: 150,
      },
      {
        title: '主舱位',
        dataIndex: 'mainClass',
        align: 'center',
        width: 100,
      },
      {
        title: '子舱位',
        dataIndex: 'subClass',
        align: 'center',
        width: 100,
      },
      {
        title: 'PNR',
        dataIndex: 'pnrRef',
        align: 'center',
        width: 120,
      },
    ];
  };
  return (
    <div className="formItems">
      <Table
        size="mini"
        columns={columns}
        bordered
        dataSource={tableData}
        scroll={{ y: 400, x: 900 }}
        pagination={false}
        rowKey="idNum"
      />
      <Pagination
        total={total || 0}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => `${range[0]}-${range[1]} 共 ${total} 项`}
        pageSize={pageSize}
        current={current}
        onChange={page => {
          handleCurrent(page);
        }}
        onShowSizeChange={(current, size) => {
          handleCurrent(1);
          handlePageSize(size);
        }}
      />
      <ClaimsRecord {...{ claimsData, setClaimsVisible, claimsVisible, passengerTitle }} />
      <PayCountModal
        data={data}
        passengerName={passengerName}
        payCountVisible={payCountVisible}
        handlePayCountVisible={handlePayCountVisible}
      />
    </div>
  );
};
export default PassengerList;
